<template>
  <div>
    <el-row>
      <el-col :xs="24" :sm="0">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日完成代办项</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="dialogVisible = true"
              >打 卡</el-button
            >
          </div>
          <div v-for="todo in overTodo" class="text item">
            {{ todo.todo }}
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row>
      <el-col :xs="0" :sm="7" :md="8" :lg="8" :xl="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>今日完成代办项</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="dialogVisible = true"
              >打 卡</el-button
            >
          </div>
          <div v-for="todo in overTodo" class="text item">
            {{ todo.todo }}
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="17" :md="16" :lg="16" :xl="16">
        <el-card class="box-card">
          <ul
            class="infinite-list"
            v-loading="loading"
            style="overflow: auto; height: 480px"
          >
            <li v-for="punchin in punchins" class="infinite-list-item">
              <div calss="container" style="position: relative">
                <el-row>
                  <el-col :span="23"
                    ><el-avatar
                      size="small"
                      :src="punchin.avatar"
                      style="margin-right: 5px"
                    ></el-avatar>
                    <span style="position: absolute; top: 7px"
                      >{{ punchin.userName }}
                    </span></el-col
                  >
                  <el-col :span="1"
                    ><el-button
                      v-if="
                        punchin.userId === $store.state.user.userId ||
                        $store.state.user.userId === 2
                      "
                      type="danger"
                      icon="el-icon-delete"
                      circle
                      size="mini"
                      @click="deletePunchin(punchin.id)"
                    ></el-button>
                  </el-col>
                </el-row>
              </div>
              <div class="content" style="margin-left: 30px">
                {{ punchin.punchin }}
              </div>

              <div
                style="
                  margin-left: 20px;
                  margin-bottom: 20px;
                  display: inline-block;
                "
                v-for="url in getSelectUrls(punchin.id)"
                :key="url.id"
              >
                <el-image
                  style="width: 100px; height: 100px"
                  :src="url"
                  :preview-src-list="getSelectUrls(punchin.id)"
                  fit="fill"
                ></el-image>
              </div>

              <!-- <div
                class="time"
                style="margin-top: 20px; font-size: 12px; color: #6f7174"
              ></div> -->
              <el-divider content-position="right">
                <i class="el-icon-time"></i>
                {{ punchin.createTime }}</el-divider
              >
            </li>
          </ul>
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNo"
            :page-size="pageSize"
            layout="total,  prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog
      title="说点什么吧"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <el-input
        type="textarea"
        autosize
        placeholder="请输入内容"
        v-model="punchin"
        maxlength="255"
        show-word-limit
      >
      </el-input>

      <el-upload
        action=" http://43.138.15.13:9999/sys/common/upload"
        list-type="picture-card"
        :on-remove="handleRemove"
        :on-success="handlePhotoSuccess"
        style="margin-top: 20px"
        :limit="6"
        :file-list="fileList"
      >
        <i class="el-icon-plus"></i>
      </el-upload>

      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="addpunchin" :loading="loading"
          >发 布</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import punchinApi from "@/api/punchin";
import todoApi from "@/api/todo";
import commonApi from "@/api/common";

export default {
  data() {
    return {
      imageUrl: "",
      punchins: [],
      overTodo: [],
      // 日记附带的图片
      punchinPhotoUrls: [],
      punchin: "",
      dialogVisible: false,

      // 分页
      pageNo: 1,
      pageSize: 4,
      total: 0,
      // 加载
      loading: false,

      // 上传图片地址
      ImageUrls: [],
      // 文件列表
      fileList: [],
    };
  },

  methods: {
    // 获取显示的图片url
    getSelectUrls(punchinId) {
      this.urls = [];
      for (let v = 0; v < this.punchinPhotoUrls.length; v++) {
        if (this.punchinPhotoUrls[v].punchinId == punchinId) {
          this.urls.push(this.punchinPhotoUrls[v].photoAddr);
        }
      }
      return this.urls;
    },

    // 删除上传图片
    handleRemove(file, fileList) {
      commonApi.deleteImg(file.response.data).then((resp) => {
        this.$message(resp.message);
      });

      //获取元素在数组的下标

      Array.prototype.indexOf = function (val) {
        for (var i = 0; i < this.length; i++) {
          if (this[i] == val) {
            return i;
          }
        }

        return -1;
      };

      //根据数组的下标，删除该下标的元素

      Array.prototype.remove = function (val) {
        var index = this.indexOf(val);

        if (index > -1) {
          this.splice(index, 1);
        }
      };

      this.fileList.remove(file);
    },
    handlePhotoSuccess(res, file) {
      this.fileList.push(file);
    },

    // 获取所有打卡信息
    getAllPunchin() {
      punchinApi.getAll().then((resp) => {
        this.punchins = resp.data;
      });
    },
    // 分页
    handleCurrentChange(val) {
      if (val != undefined || val != null) {
        this.pageNo = val;
      }
      this.loading = true;
      punchinApi
        .getByPage(
          this.pageNo == null || this.pageNo == undefined ? 1 : this.pageNo,
          this.pageSize
        )
        .then((resp) => {
          this.pageNo = val;
          this.punchins = resp.data.punchins;

          this.punchinPhotoUrls = resp.data.PhotoUrls;

          this.total = resp.data.total;
          this.loading = false;
        });
    },

    // 获取今日完成的todo
    getOverTodos() {
      todoApi.getOverTodo(this.$store.state.user.userId).then((resp) => {
        this.overTodo = resp.data;
      });
    },
    // 关闭对话框，清空数据
    close() {
      this.dialogVisible = false;
      this.punchin = "";
      this.ImageUrls = [];
      this.fileList = [];
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.close();
          done();
        })
        .catch((_) => {});
    },
    // 发 布打卡内容
    addpunchin() {
      this.loading = true;
      const punchin = {
        punchin: this.punchin,
        userId: this.$store.state.user.userId,
        imageUrls: this.ImageUrls,
      };

      for (let i = 0; i < this.fileList.length; i++) {
        this.ImageUrls.push(
          // 43.138.15.13
          `http://43.138.15.13:9999/sys/common/download?name=${this.fileList[i].response.data}`
        );
      }

      if (
        this.punchin == "" ||
        this.punchin == null ||
        this.punchin == undefined
      ) {
        this.loading = false;
        this.$message("请输入内容哦~");
        return;
      }
      punchinApi.addpunchin(punchin).then((resp) => {
        if (resp.code === 20000) {
          this.$message({
            message: resp.message,
            type: "success",
          });
        } else {
          this.$message({
            message: resp.message,
            type: "warning",
          });
        }
        this.dialogVisible = false;
        this.handleCurrentChange();
        this.punchin = "";
        this.ImageUrls = [];
        this.fileList = [];
        this.loading = false;
      });
    },
    // 删除发布的内容
    deletePunchin(id) {
      this.$confirm("此操作将永久删除该内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          punchinApi.deletePunchin(id).then((resp) => {
            this.$message({
              type: "success",
              message: resp.message,
            });
            // 刷新页面
            this.handleCurrentChange();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
  created() {
    this.handleCurrentChange();
    this.getOverTodos();
  },
};
</script>

<style scoped>
li {
  list-style: none;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

/* 头像 */

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 10px;
}

.content {
  margin: 10px;
}
</style>
